<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <title>广告管理</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!--头部-->
  <header id="headerDiv" class="main-header">
    <!--#include  file="/pages/admin/header.html"-->
  </header>

  <!--左侧边栏 -->
  <aside id="sidebarDiv" class="main-sidebar">
    <!--#include  file="/pages/admin/sidebar.html"-->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        <small>广告列表</small>
      </h1>
      <ol class="breadcrumb">
        <li><i class="fa fa-buysellads"></i> 广告管理</li>
        <li><a href="javascript:void(0);">广告列表</a></li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <form role="form" class="form-inline pull-left">

                <button class="btn btn-success" type="button" onclick="add();"><i class="fa fa-buysellads"></i>&nbsp;&nbsp;<span class="bold">新建广告</span></button>
              </form>
              <form role="form" class="form-inline pull-right">
                <label class="control-label">搜索:</label>
                <div class="form-group">
                  <select id="searchKey" class="form-control m-b" name="account">
                    <option value="id">广告ID</option>
                    <option value="adsname">广告名称</option>
                  </select>

                </div>
                <div class="form-group">
                  <div class="input-group">
                    <input id="searchValue" type="text" class="form-control">
                    <span class="input-group-btn">
                <button type="button" class="btn btn-primary" onclick="search();"><i class="fa fa-search"></i></button>
                </span>
                  </div>
                </div>

              </form>
            </div>


            <div class="box-body table-responsive">
              <table id="datatable"  class="table table-bordered table-hover table-striped ">
                <thead>
                <tr>
                  <th style=" white-space:nowrap">ID</th>
                  <th style=" white-space:nowrap">广告名称</th>
                  <th style=" white-space:nowrap">类型</th>
                  <th style=" white-space:nowrap">计划名称/ID</th>
                  <th style=" white-space:nowrap">游戏名称/ID</th>
                  <th style=" white-space:nowrap">预算名称/ID</th>
                  <th style=" white-space:nowrap">尺寸</th>
                  <th style=" white-space:nowrap">扣量</th>
                  <th style=" white-space:nowrap">权重</th>
                  <th style=" white-space:nowrap">状态</th>
                  <th style=" white-space:nowrap">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>

  <!--底部-->
  <footer id="footerDiv" class="main-footer">
    <!--#include  file="/pages/admin/footer.html"-->
  </footer>

  <!-- Control Sidebar -->
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>


  <div style="position: absolute;display: none;" id="image">
    <img id="imgurl" alt=""><!--如果加上AJAX就可以根据不同的超链接来显示不同的图片了-->
  </div>

</div>
<!-- ./wrapper -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/morris.js/morris.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/dist/js/adminlte.min.js"></script>
<script src="/dist/js/store.min.js"></script>
<script src="/dist/js/layer/layer.js"></script>


<script>
    var dataMap={};
    var datatable;
    let adsid = getUrlParam("adsid");
    if(adsid != null && adsid!==''){
        $("#searchValue").val(adsid);
    }
    $(function () {
        datatable = $("#datatable").DataTable({
            // 'scrollX' : $(document).width(),
             'aLengthMenu' : [20],
            'scrollCollapse' : true,//
            'stateSave' : false,//保存配置状态
            'processing' : false, // 显示loading
            'paging' : true,
            'lengthChange' : false,
            'searching' : false,// 取消搜索框
            'ordering' : false,// 取消字段排序
            'info' : true,
            'autoWidth' : false,
            'deferRender': true,
            'serverSide' : true, // ajax请求时必须写本项
            // 'pagingType' : 'full_numbers',
            'ajax' : { // ajax请求
                'type' : "POST",
                'url' : "/lmgame/adsplan/page",
                'data' : function ( d ) {
                    d.searchKey = $("#searchKey").val();
                    d.searchValue = $("#searchValue").val();
                    return d;
                },
                "error": function(xhr, ts, et) { //XMLHttpRequest, textStatus, errorThrown
                    if(xhr.status === 400){
                        window.location.href = "/pages/admin/login.html";
                    }
                    if(xhr.status === 403){
                        window.location.href = "/403.html";
                    }
                }
            },
            'columns' : [ // data数据绑定对应列
                {"data" : "id"},
                //{"data" : "adsname"},
                {
                    "class":          'notab',
                    "data":           null
                },
                {"data" : null},
                {
                    "class":          'notab',
                    "data":           null
                },
                {
                    "class":          'notab',
                    "data":           null
                },
                {
                    "class":          'notab',
                    "data":           null
                },
                {"data" : null},
                {"data" : "kou"},
                {"data" : "priority"},
                {"data" : "stats"},
                {
                    "class":          'notab',
                    "data":           null
                }
            ],
            "columnDefs" : [
                {
                    targets: 1,
                    render: function (a) {
                        return a.adsname;
                    }
                },
                {
                    targets: 2,
                    render: function (a) {
                        return a.typename + "/" + a.type_id;
                    }
                },
                {
                    targets: 3,
                    render: function (a) {
                        return a.plan_name + "/" + a.planid;
                    }
                },
                {
                    targets: 4,
                    render: function (a) {
                        return a.gamename + "/" + a.gameid;
                    }
                },
                {
                    targets: 5,
                    render: function (a) {
                        return a.budgetname + "/" + a.budgetid;
                    }
                },
                {
                    targets: 6,
                    render: function (a) {
                        return "<a onmouseover='displayImg("+a.width+","+a.height+",\""+a.imgurl+"\")' onmouseout='vanishImg()' onmousemove='displayImg("+a.width+","+a.height+",\""+a.imgurl+"\")' href='"+a.imgurl+"' target='_blank'>"+a.width + "*" + a.height+"</a>";
                    }
                },
                {
                    targets: 9,
                    render: function (a) {
                        if(a === '0'){
                            return "正常";
                        }else{
                            return "<span style='color:red;'>锁定</span>";
                        }
                    }
                },
                {
                    targets: 10,
                    render: function (a) {
                        let html = "";
                        if(a.stats === '0'){
                            html += "<a  href='javascript:updateStats("+a.id+",1)' title='锁定'><i style='color: #333;' class=\"fa fa-lock \"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;";
                        }else{
                            html += "<a  href='javascript:updateStats("+a.id+",0)' title='激活'><i style='color: #333;' class=\"fa fa-unlock \"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;";
                        }

                        html += "<a  href='javascript:editForm("+a.id+")' title='编辑'><i style='color: #333;' class=\"fa fa-edit \"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;";
                        html += "<a  href='javascript:deleteConfirm("+a.id+")' title='删除'><i style='color: #333;' class=\"fa fa-trash \"></i></a>";

                        return html;
                    }
                }
            ],
            "createdRow": function (row, data, index) {
                dataMap[data.id] = data;
            },
            'language' : {
                'lengthMenu' : "显示 _MENU_ 项结果", // 每页显示多少条
                'zeroRecords' : "没有记录！", // 没有记录时显示的内容
                'info' : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", // 当前页信息
                'infoEmpty' : "显示第 0 至 0 项结果，共 0 项", // 当前页信息-没有记录时
                'paginate' : {
                    'previous' : " << ",
                    'next' : " >> "
                }
            }
        });


    });


    function search() {
        datatable.ajax.reload(false);
    }

    function add() {
        store.remove('adsid');
        window.location.href = "/pages/ads/addAds.html";
    }

    function editForm(id) {
        store.set('adsid',id);
        window.location.href = "/pages/ads/addAds.html";
    }


    function deleteConfirm(gameid) {
        layer.confirm('确定删除该广告吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            let url="/lmgame/adsplan/delete";
            $.ajax({
                type : 'POST',
                url : url,
                data :{'id':gameid},
                dataType : "json",
                success: function(data) {
                    if(data.code =='0'){
                        datatable.ajax.reload(false);
                        layer.msg('删除成功', {
                            icon: 1,
                            time: 1000 //3秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            flag=true;
                        });
                    }
                },
                error: function (xhr, ts, et) { //XMLHttpRequest, textStatus, errorThrown
                    if (xhr.status === 400) {
                        window.location.href = "/pages/admin/login.html";
                    }
                    if (xhr.status === 403) {
                        window.location.href = "/403.html";
                    }
                }
            });
        }, function(){

        });
    }

    // 确认修改
    function updateStats(id,stats) {
        let msg = '确定锁定该广告吗？';

        if(stats == 0){
            msg = '确定激活该广告吗？';
        }
        layer.confirm(msg, {
            btn: ['确定','取消'] //按钮
        }, function(){
            let url="/lmgame/adsplan/update";
            $.ajax({
                type : 'POST',
                url : url,
                data :{
                    'ads.id' : id,
                    'ads.stats' : stats
                },
                dataType : "json",
                success: function(data) {
                    if(data.code == 0){
                        datatable.ajax.reload(false);
                        layer.msg('修改成功', {
                            icon: 1,
                            time: 1000 //3秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            flag=true;
                        });
                    }else{
                        layer.msg(data.msg);
                    }
                },
                error: function (xhr, ts, et) { //XMLHttpRequest, textStatus, errorThrown
                    if (xhr.status === 400) {
                        window.location.href = "/pages/admin/login.html";
                    }
                    if (xhr.status === 403) {
                        window.location.href = "/403.html";
                    }
                }
            });
        }, function(){

        });
    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r!=null) return unescape(r[2]); return null; //返回参数值
    }

    function displayImg(width, height, imgurl) {
        $("#imgurl").attr("width",width);
        $("#imgurl").attr("height",height);
        $("#imgurl").attr("src",imgurl);
        var img = document.getElementById("image");
        var x = event.clientX + document.body.scrollLeft + 20;
        var y = event.clientY + document.body.scrollTop - 5;
        img.style.left = x + "px";
        img.style.top = y + "px";
        img.style.display = "block";
    }

    //图片消失
    function vanishImg(){
        var img = document.getElementById("image");
        img.style.display = "none";
    }


</script>
</body>
</html>
